<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>拓扑路由列表</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			
		});
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
		function viewDetail(id,programName){
			console.info(id);
			$.ajax({
				type: "POST",
				url: "${ctx}/scene/sceneRouter/interfaceList",
				data: {
					ids:id
				},
				<%--data: {id:${"#id"}.val()},--%>
				success: function (subnetList) {
					for (var i = 0; i < subnetList.length; i++) {
						$("#algorithm").append("<li>" + subnetList[i].cidr+'('+subnetList[i].subnetName+')' + "</li>");

					}


				},
				error:function(){
					alert("error");
				}
			});
			$.jBox($("#viewDetailBox").html(), {title:"查看接口", buttons:{"关闭":true}, submit: function(){}});

		}
		function viewRouterTableDetail(id,programName){
			console.info(id);
			$.ajax({
				type: "POST",
				url: "${ctx}/scene/sceneRouter/routerTableList",
				data: {
					ids:id
				},
				<%--data: {id:${"#id"}.val()},--%>
				success: function (routerTableList) {
					for (var i = 0; i < routerTableList.length; i++) {
						$("#routerTable").append("<li>" + routerTableList[i].destination+'(目的cidr)'+'  '+routerTableList[i].nexthop+'(下一跳)' + "</li>");

					}


				},
				error:function(){
					alert("error");
				}
			});
			$.jBox($("#viewRouterTableDetailBox").html(), {title:"查看路由表", buttons:{"关闭":true}, submit: function(){}});

		}
	</script>
	<script type="text/template" id="viewRouterTableDetailBox">
		<div>
			<ul id="routerTable">
			</ul>
		</div>
	</script>
	<script type="text/template" id="viewDetailBox">
		<div>
			<ul id="algorithm">
			</ul>
		</div>
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/scene/sceneRouter/topologyRouterList?environmentId=${environmentId}&type=${type}">路由列表</a></li>
		<%--<shiro:hasPermission name="scene:sceneRouter:edit"><li><a href="${ctx}/scene/sceneRouter/form">路由添加</a></li></shiro:hasPermission>--%>
	</ul>
	<input type="hidden" id="id" name="id" value="${environmentId}">
	<input type="hidden" id="type" name="type" value="${type}">
	<sys:message content="${message}"/>
	<table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead>
			<tr>
				<th>路由名称</th>
				<th>接口列表</th>
				<th>路由表列表</th>

				<shiro:hasPermission name="scene:sceneRouter:edit"><th>操作</th></shiro:hasPermission>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${routerList}" var="sceneRouter">
			<tr>
				<td>
					${sceneRouter.routerName}
				</td>
				<td><a href="javascript:viewDetail('${sceneRouter.id}','${sceneRouter.routerName}')" title="查看">查看</a></td>
				<td><a href="javascript:viewRouterTableDetail('${sceneRouter.id}','${sceneRouter.routerName}')" title="查看">查看</a></td>

				<shiro:hasPermission name="scene:sceneRouter:edit"><td>

					<a href="${ctx}/scene/sceneRouter/routerTableAdd?routerId=${sceneRouter.id}&environmentId=${environmentId}&type=${type}">添加路由表</a>
					<%--<a href="${ctx}/scene/sceneRouter/firewallForm?routerId=${sceneRouter.id}&environmentId=${environmentId}">添加防火墙</a>--%>

				</td>
				</shiro:hasPermission>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div style = "text-align:right;">
		<input id="btnSubmit" style="margin-right: 100px;margin-top: 20px" class="btn btn-primary" type="button" value="下一步" onclick="window.location.href='${ctx}/scene/sceneRouter/firewallList?environmentId=${environmentId}&type=${type}'"/>
	</div>
</body>
</html>